// 弹性布局
@mixin flex($direction: row, $justify: flex-start, $align: center) {
    display: flex;
    flex-direction: $direction;
    justify-content: $justify;
    align-items: $align;
  }
  
  // 文本溢出省略
  @mixin text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  // 多行文本溢出省略
  @mixin text-ellipsis-multiple($lines: 2) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $lines;
    overflow: hidden;
  }
  
  // 滚动条样式
  @mixin scrollbar {
    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
  
    &::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 3px;
    }
  
    &::-webkit-scrollbar-track {
      background: transparent;
    }
  }
  
  // 渐变背景
  @mixin gradient-bg($start-color, $end-color, $direction: to right) {
    background: linear-gradient($direction, $start-color, $end-color);
  }
  
  // 响应式
  @mixin respond-to($breakpoint) {
    @if $breakpoint == "small" {
      @media (max-width: 768px) { @content; }
    }
    @else if $breakpoint == "medium" {
      @media (max-width: 992px) { @content; }
    }
    @else if $breakpoint == "large" {
      @media (max-width: 1200px) { @content; }
    }
  }